<template>
  <z-paging ref="paging" @query="queryList" use-virtual-list :default-page-size="pageSize">
    <template #top>
      <view class="top">固定顶部</view>
      
    </template>
    <template #bottom>
      <view class="top">固定底部</view>
      
    </template>
    <template #cell="{item,index}">
      <view class="item">
        item:{{item.item}}---index:{{index}}
      </view>
    </template>
  </z-paging>
</template>

<script setup lang="ts">
  import { ref } from "vue"
  
  /**
   * default-page-size 每页的数据量
   */
  const paging = ref()
  
  const pageSize = 50
  
  function queryList(pageNo, pageSize) {
    if(pageNo == 5) {
      paging.value.complete([])
      return
    }
    let start = (pageNo-1) * pageSize
    let end = pageSize + start
    let data = []
    for(let i=start;i<end;i++) {
      data.push(i)
    }
    setTimeout(() => {
      console.log('complete',data);
      paging.value.complete(data)
    }, 1000)
  }
  
  
</script>

<style lang="less">
  .top {
    background-color: red;
    color: white;
  }
  
  .item {
    text-align: center;
    padding: 20rpx;
    background-color: green;
    color: white
  }
  
  
</style>